<template>
  <div class="card-page">
    <tool-bar nav="" :title='action_name + "用户"'>
      <el-button size="small" @click="$router.push('/admin/admin-user/add')" v-if="$props.action=='edit'">新建
      </el-button>
      <el-button size="small" @click="save_click" type="primary"> 保存</el-button>
    </tool-bar>
    <el-row :gutter="12" type="flex">
      <el-col :span="12">
        <el-card shadow="always">
          <template #header>
            <span>基本信息</span>
          </template>
          <kv label="姓名">
            <el-input v-model="info.name" chk="*"/>
          </kv>
          <kv label="登录名">
            <el-input v-model="info.loginName" chk="*"/>
          </kv>
          <kv label="手机号">
            <el-input v-model="info.mobile"/>
          </kv>
          <kv label="角色">
            <selector v-model="info.roles" url="/admin/admin-role/list" fields="id,name" multi
                      value-is-object/>
          </kv>
          <kv label="岗位">
            <el-input v-model="info.duty"/>
            <selector v-model="info.duty" url="/admin/admin-user/dutys"/>
          </kv>
          <kv label="电子邮件">
            <el-input v-model="info.email"/>
          </kv>

          <kv label="头像地址">
            <el-input v-model="info.logo.url"/>
          </kv>
          <kv label="产品线" v-if="id">

            <el-tag class="link" v-for="(item) in info.productLines"
                    @click="$router.push('/dev/product-line/edit/'+ item.id)" :key="item.id" style="margin-right:8px;">
              {{
                item.name
              }}
            </el-tag>
          </kv>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
/**
 * Created by CodeGenerator  at 2021-03-15 10:31:23
 */

import roleRef from "../admin-role/admin-role-ref.vue"


//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs()

//定义属性
const $props = defineProps({
  id: {type: String},
  action: {type: String}
});

const $model = defineModel({type: String});

//定义data
const $data = reactive({
  info: {
    duty: "",
    roles: [],
    logo: {},
    identityCard: {},
    liveCity: {},
    workCity: {},
  }, //子对象需要声明。
});

//定义部分计算属性， 页面绑定时使用（兼容vue2写法）
const info = $computed(() => $data.info);

const action_name = $computed(() => {
  return {add: "添加", edit: "修改"}[$props.action]
})


const productLine_click = function (id) {
  jv.$router.push("" + id)
}

const loadData = function () {
  if (!$props.id) return;
  jv.$http.post("/admin/admin-user/detail/" + $props.id).then(res => {
    $data.info = res.data.data;
  });
}
const save_click = function () {

  jv.$http.post("/admin/admin-user/save", $data.info).then(res => {
    //[axios拦截器中已处理了异常]。
    jv.info(action_name + " 成功");
    if ($props.action == "add") {

      jv.$router.push("/admin/admin-user/edit/" + res.data.data)
    } else if ($props.action == "edit") {
      jv.$router.push("/admin/admin-user/list")
    }
  })
}


onMounted(() => {
  loadData()
})

</script>
